<template>
  <div>
    <project-header :is-border="isBorder"></project-header>
    <div class="bottom">
      <!--about部分-->
      <div class="about floatLeft">
        <span class="title">About</span>
        <span class="about-text">I’m Steve Lloyd and this is..</span>
        <span class="log">CHROMA</span>
        <div class="syetem" v-for="(item,key) in syetemList" :key="key">
          <span class="syetem-box block"></span>
          <span class="syetem-txt block">{{item}}</span>
        </div>
        <div class="liverpool">
          <span class="liverpool-box block"></span>
          <span class="liverpool-txt block">Beta Chroma in my home town - Liverpool</span>
        </div>
        <div class="text">
          <span class="text-title block">What is a Chroma?</span>
          <span class="text-txt block">Chroma is a brand new large format technical field camera, designed from the ground up to meet the needs of photographers of all experience levels. It is built from high quality acrylic in a variety of colours, using highly accurates laser cutting to ensure consistant build quality and performance.</span>
          <span class="text-title block">What can it do?</span>
          <span class="text-txt block">Built around a 4x5 modular principle, but similar to medium format systems, the Chroma film back can be swapped in a few seconds using integrated magnet to allow multiple mediums to be used. At launch, the Chroma will take standard 4x5 DDS film holders (none included with the camera). It allows the photographer full control of all front standard movements to aid creativitu. Future plans include both a 6x12 medium format roll film back and a 4x5 wet plate back.</span>
          <span class="text-title block">What can it do?</span>
          <span class="text-txt block">Built around a 4x5 modular principle, but similar to medium format systems, the Chroma film back can be swapped in a few seconds using integrated magnet to allow multiple mediums to be used. At launch, the Chroma will take standard 4x5 DDS film holders (none included with the camera). It allows the photographer full control of all front standard movements to aid creativitu. Future plans include both a 6x12 medium format roll film back <a>and a 4x5 wet plate back.</a></span>
        </div>
      </div>
      <!--support部分-->
      <div class="support floatLeft">
        <span class="support-title block">Support</span>
        <!--make部分-->
        <div class="make">
          <span class="make-title block">Make a pledge without a reward</span>
          <span class="lineBlock moneyLog">$</span><input type="text" value="10"/>
          <span class="make-money block">ABOUT $14</span>
        </div>
        <!--pledge部分-->
        <div class="pledge support-box" v-for="item in limitList">
          <span class="pledge-more more block">Pledge $6 or more</span>
          <span class="pledge-about about block">ABOUT $8</span>
          <span class="pledge-patch patch block">{{item.patch}}</span>
          <span class="pledge-made made block">A handmade black/purple Chroma patch for your bag/clothes, made by my mum!</span>
          <span class="pledge-ship ship block">ESTIMATED DELIVERY SHIPS TO</span>
          <span class="pledge-apr apr lineBlock floatLeft">Apr 2018</span>
          <span class="pledge-anywhere anywhere lineBlock floatLeft">Anywhere in the world</span>
          <span class="clear"></span>
          <span class="pledge-limited limited block">{{item.limites}}</span>
          <span class="pledge-back back block">7 backers</span>
        </div>
        <!--gone部分-->
        <span class="gone-title block">All gone!</span>
        <div class="gone support-box" v-for="item in num">
          <div class="gone-box">
            <span class="gone-more more block">Pledge $275 or more</span>
            <span class="gone-about about block">ABOUT $882</span>
            <span class="gone-special patch block">Kickstarter Special</span>
            <span class="gone-text made block">Standard release Chroma, which will be delivered once the #0 Edition, Earlybird and Kickstarter edition cameras have been completed. Available in a full range of colours and with the standard Chroma logo on the back of the ground glass holder. Your colour can be chosen from a selection of colours once the campaign ends;
                <br/>red, pink, blue, white, green, matt black, black,purple, yellow
            </span>
            <span class="gone-ship ship">ESTIMATED DELIVERY SHIPS TO</span>
            <span class="gone-aug apr floatLeft">Aug 2018</span>
            <span class="gone-anywhere anywhere floatLeft">Anywhere in the world</span>
            <span class="clear"></span>
            <button class="gone-btn">Reward no longer available</button>
            <span class="gone-back back block">25 backers</span>

          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
  import projectHeader from '../public/ProjectHeader'

    export default {
        name: "project-details-campaign",
        components:{ projectHeader },
        data(){
            return{
              syetemList:[ 'Complete Chroma 4x5 Syetem', 'Chroma Family Portrait', 'Chroma folder down for transport' ],
              limitList:[
                { patch:'Handmade Chroma Patch',limites:'Limited (23 left of 30)' },
                { patch:'Chroma Metal Pin from ShootFilmCo.com',limites:'Limited (23 left of 30)' },
                { patch:'Release Edition',limites:'' }
              ],
              num:[ '', '' ],
              isBorder:[ true, false, false, false, false ]
            }
        }
    }
</script>

<style scoped lang="scss">
  .floatLeft{float: left}
  .clear{clear: both}
  .block{display: block}
  .lineBlock{display: inline-block}
    .bottom {
      padding: 75px 0 200px 83px;
      background: #FFFFFF;
      box-shadow: 0 -1px 0 0 #DBDEDD;
      .about {
        width: 697px;
        margin-right: 33px;
        span{display: block}
        .title{
          font-family: PingFangSC-Medium;
          font-size: 20px;
          color: #2E2E2E;
        }
        .about-text{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #2E2E2E;
          letter-spacing: -0.2px;
          margin: 43px 0 7px 0;
        }
        .log{
          font-family: ZapfDingbatsITC;
          font-size: 160px;
          color: #3F0D5A;
          letter-spacing: -1px;
          margin-left: -8px;
        }
        .syetem {
          text-align: center;
          .syetem-box {
            width: 679px;
            height: 451px;
            background: #8B8B8B;
          }
          .syetem-txt {
            font-family: Arial-ItalicMT;
            font-size: 14px;
            color: #3D3E63;
            letter-spacing: 0.2px;
            margin: 11px 0 120px 0;
          }
        }
        .liverpool {
          text-align: center;
          .liverpool-box {
            width: 679px;
            height: 1063px;
            background: #8B8B8B;
          }
          .liverpool-txt {
            font-family: Arial-ItalicMT;
            font-size: 14px;
            color: #3D3E63;
            letter-spacing: 0.2px;
            margin: 11px 0 120px 0;
          }
        }
        .text {
          .text-title {
            font-family: PingFangSC-Medium;
            font-size: 22px;
            color: #2E2E2E;
            letter-spacing: -0.6px;
          }
          .text-txt {
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #2E2E2E;
            letter-spacing: 0;
            line-height: 36px;
            margin: 40px 0 38px 0;
            a {
              color: #2C59F6;
            }
          }
        }
      }
      .support {
        width: 318px;
        .support-title {
          font-family: PingFangSC-Regular;
          font-size: 20px;
          color: #2E2E2E;
          letter-spacing: 0.4px;
          margin-bottom: 53px;
        }
        .make {
          padding: 20px 0 0 20px;
          border: 1px solid #DBDEDD;
          width: 318px;
          height: 180px;
          box-sizing: border-box;
          .make-title {
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: #2E2E2E;
            letter-spacing: -0.2px;
            margin-bottom: 20px;
          }
          .moneyLog {
            width: 50px;
            line-height: 40px;
            border: 1px solid #DBDEDD;
            text-align: center;
            vertical-align: middle;
          }
          input {
            width: 220px;
            height: 42px;
            border: 1px solid #DBDEDD;
            border-left: none;
            padding-left: 13px;
            box-sizing: border-box;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #2E2E2E;
            vertical-align: middle;
            outline: none;
          }
          .make-money {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #666666;
            letter-spacing: 0.2px;
            margin-top: 8px;
          }
        }
        .support-box {
          width: 318px;
          height: 340px;
          padding: 20px 0 43px 20px;
          box-sizing: border-box;
          border: 1px solid #DBDEDD;
          margin-top: 20px;
          span {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: -0.2px;
          }
          .more {
            font-size: 18px;}
          .about {
            color: #666666;
            letter-spacing: 0.2px;
            margin: 2px 0 20px 0;
          }
          .patch {
            font-size: 16px;
            width: 192px
          }
          .made {
            font-size: 14px;
            color: #666666;
            line-height: 21px;
            width: 265px;
            margin: 11px 0 19px 0;
          }
          .ship {
            color: #666666;
            letter-spacing: 0.2px;
          }
          .apr {
            font-size: 14px;
            margin: 1px 80px 46px 0;
          }
          .anywhere {
            width: 128px;
            font-size: 14px;
          }
          .pledge-limited {
            color: #EE655F;
            margin-top: 26px;
            width: 120px;
            height: 17px;
          }
          .back {
            font-size: 12px;
            color: #666666;
            margin-top: 40px;
          }
        }
        div:nth-child(4) {
          border: none
        }
        .gone-title {
          font-family: PingFangSC-Medium;
          font-size: 24px;
          color: #2E2E2E;
          letter-spacing: -0.2px;
          padding-top: 35px;
        }
        .gone {
          background: #FBFBFA;
          height: 583px;
          button {
            background: #E8E8E8;
            outline: none;
            border: none;
            width: 177px;
            height: 42px;
            font-family: PingFangSC-Medium;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: -0.2px;
            margin-bottom: 20px;
          }
          .back{margin-top: 0}
        }
        div:nth-child(8) {
          height: 552px;
          .apr {margin-bottom: 23px;}
        }
      }
    }
</style>
